import Taro from "@tarojs/taro";
import { useEffect, useState } from "react";
import { View, Input } from "@tarojs/components";
import { AuthSteps } from "@/data/authorization/authSteps";
import {
  AbstractButton,
  C40TermsAndConditions,
  ModalWrapper,
  Paragraph,
  CheckBox,
} from "@/components";
import { error } from "@/utils/alert";
import { navigateTo } from "@/utils/navigation";
import { useAuth } from "@/store/authContext";
import styles from "./index.module.scss";

export default function LoginForm() {
  const { authState, handleRegister, handleBindPhone } = useAuth();
  const { authStep } = authState;
  const [nickName, setNickName] = useState("");
  const [agreedToC, setAgreedToC] = useState(false);
  const [isTermsAgreed, setIsTermsAgreed] = useState(false);

  const handleNickNameInput = (e) => {
    if (e.mpEvent.detail.value) {
      setNickName(e.mpEvent.detail.value);
    }
  };

  const handleSubmitNickName = () => {
    if (authStep == AuthSteps.ONE_SILENT) {
      if (nickName) {
        handleRegister(nickName);
      } else {
        error("昵称未填写！");
      }
    }
  };

  const handleBindPhoneNumber = (e: any) => {
    handleBindPhone(e);
  };

  const onAgreeTerms = () => {
    setIsTermsAgreed(!isTermsAgreed);
  };

  useEffect(() => {
    Taro.createSelectorQuery()
      .select("#nickname-input")
      .fields({
        properties: ["value"],
      })
      .exec((res) => {
        if (nickName === "") {
          const nickNameAutoInputValue = res[0].value;
          setNickName(nickNameAutoInputValue);
        }
      });
  });

  // Note Luke: nothin to trigger closing of modal currently
  if (authStep! > AuthSteps.ONE_SILENT && authStep! < AuthSteps.FOUR_LOGIN) {
    return (
      <ModalWrapper type="dark" topBarText="填写手机号">
        <View className={styles["phone-upper-text"]}>
          <View>为了更好的服务体验</View>
          <View>我们建议您使用手机号注册</View>
        </View>

        <AbstractButton
          color="dark"
          openType="getPhoneNumber"
          onGetPhoneNumber={handleBindPhoneNumber}
          disabled={!isTermsAgreed}
        >
          授权使用手机号
        </AbstractButton>

        <View className={styles["phone-lower-text"]}>
          <View className={styles.terms}>
            <View className={styles["check-box"]}>
              <CheckBox onChangeCb={onAgreeTerms} checked={isTermsAgreed} />
            </View>
            已阅读并同意
            <View
              className={styles.link}
              onClick={() => navigateTo("pages/terms-conditions/index")}
            >
              用户协议
            </View>
            ，
            <View
              className={styles.link}
              onClick={() => navigateTo("pages/privacy-policy/index")}
            >
              隐私政策
            </View>
          </View>
          <View>{`首次登录将会同步注册L'ÉCOLE珠宝艺术中心账号`}</View>
        </View>
      </ModalWrapper>
    );
  } else if (authStep === AuthSteps.ONE_SILENT) {
    return (
      <ModalWrapper type="dark" topBarText="填写姓名">
        <Paragraph className={styles["name-tag"]} noSpacing>
          姓名
        </Paragraph>
        <Input
          type="nickname"
          id="nickname-input"
          className={styles["input-styling"]}
          placeholder="填写姓名"
          onInput={handleNickNameInput}
          value={nickName}
        />

        <AbstractButton
          color="dark"
          onClick={handleSubmitNickName}
          className={styles.cta}
          disabled={!(agreedToC && !!nickName.length)}
        >
          下一步
        </AbstractButton>

        <C40TermsAndConditions
          checked={agreedToC}
          termsConditionCb={(accepted) => setAgreedToC(accepted)}
          nameInputForm
        />
      </ModalWrapper>
    );
  } else {
    return null;
  }
}
